<template>
  <div class="barCode">
    <ul id="printInfo" class="printing">
      <li class="firstColumn">
        <ul class="container">
          <li class="item">
            <span>姓名:</span>
            <span>{{ list.patientName }}</span>
          </li>
          <li class="item">
            <span>年龄:</span>
            <span>{{ list.age }}</span>
          </li>
          <li class="longer">
            <span>入院:</span>
            <span>{{ list.inHospitalTime }}</span>
          </li>
        </ul>
      </li>
      <li class="secondColumn">
        <ul class="container">
          <li>
            <span>性别:</span>
            <span>{{ list.sex }}</span>
          </li>
          <li class="item">
            <span>科室:</span>
            <span>{{ list.departmentName }}</span>
          </li>
        </ul>
      </li>
      <li class="thirdColumn">
        <ul class="container">
          <li>
            <span>住院号:</span>
            <span>{{ list.hospitalNum }}</span>
          </li>
          <li>
            <span ref="qrCode" class="QRcode"></span>
            <!-- <img
              id="qrCode"
              class="qrCode"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2Fmf%2F8w%2FQJ8844608651.jpg&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623807951&t=4efc79db1af5588d6e38881a72a27307"
            /> -->
          </li>
        </ul>
      </li>
    </ul>

    <el-form class="top">
      <el-form-item id="printJS-form">
        <el-select
          v-model="department"
          placeholder="请选择科室"
          @change="handleChange(department, $event)"
          clearable
        >
          <el-option
            v-for="item of options_ks"
            :label="item.departmentName"
            :value="item.id"
            :key="item.val"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <v-table :header="header" :tableList="tableData"></v-table>
    <!-- <div id="printInfo" v-show="false"></div> -->
    <v-pagination :total="total" @currentPage="currentPage"></v-pagination>
  </div>
</template>

<script>
// 引入表格
import vTable from "../../components/Table/index";
// 引入打印组件
import print from "print-js";
// 引入生成条形码插件
import JsBarcode from "jsbarcode";
// 引入生成二维码插件
import QRCode from "qrcodejs2";

// import "./info.css"
import vPagination from "@/components/pagination/index";

export default {
  data() {
    return {
      options_ks: [
        {
          label: "妇产科",
          val: "1",
        },
      ],
      department: "",
      header: [
        { prop: "bedNum", label: "床号" },
        { prop: "patientName", label: "姓名" },
        { prop: "sex", label: "性别" },
        { prop: "phone", label: "手机号" },
        { prop: "departmentName", label: "所属科室" },
        { prop: "doctorName", label: "医生" },
        { prop: "hospitalNum", label: "住院号" },
        { prop: "inHospitalTime", label: "住院时间" },
        {
          label: "操作",
          render: (h, data) => {
            return (
              <el-button
                type="primary"
                onClick={() => {
                  this.printing(data.row);
                }}
              >
                打印
              </el-button>
            );
          },
        },
      ],
      tableData: [],
      list: {},
      form: {},
      total:0,
    };
  },
  mounted() {
    let data = {
      departmentId: "",
      current: "",
      size:10,
    };
    this.getAllBarCode(data);
    let routeid = sessionStorage.getItem("routeID");
    let routeID = routeid ? JSON.parse(routeid)["/index"] : "";
    this.getDepartment(routeID);
  },
  methods: {
    //当前页
    currentPage(val) {
      // console.log(val);
      let data = {
        current: val,
        size: 10,
        departmentId: "",
      };
      this.getAllBarCode(data);
    },
    handleChange(department) {
      // console.log(department);
      let data = {
        departmentId: department,
        current: "",
        size:10,
      };
      this.getAllBarCode(data);
    },
    // 查询所有科室
    getDepartment(val) {
      let data = {
        perId: val,
      };
      this.$api.getDepartment(data).then((res) => {
        // console.log(res.data.data);
        this.options_ks = res.data.data;
      });
    },
    async printing(row) {
      this.list = row;
      // let a=JSON.stringify(this.list)
      // this.form=JSON.parse(a)
      // console.log(this.form.inHospitalTime);
      let time = this.list.inHospitalTime.split(/[ ]+/);
      this.list.inHospitalTime = time[0];
      console.log(this.list.inHospitalTime);
      // 条形码
      // await JsBarcode("#barcode", row.hospitalNum, {
      //   format: "CODE128", //选择要使用的条形码类型
      //   width: 2, //设置条之间的宽度
      //   height: 40, //高度
      //   displayValue: true, //是否在条形码下方显示文字
      //   textAlign: "center", //文字所在位置,默认中间
      //   text: row.hospitalNum, //覆盖显示的文本
      //   // text: "123456789111",
      //   lineColor: "#000", //设置条和文本的颜色。
      // });
      //二维码
      await new QRCode(this.$refs.qrCode, {
        text: row.hospitalNum, // 需要转换为二维码的内容
        width: 28,
        height: 28,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      await this.printHTML();
    },
    //打印内容样式设置
    printHTML() {
      // let clientWidth = document.documentElement.clientWidth;
      // console.log(clientWidth)
      let printInfo = document.querySelector("#" + "printInfo");

      // 新建一个 DOM
      // let container = document.createElement("div");

      // // // 克隆DOM节点
      // container = printInfo.cloneNode(true);

      // 将元素设为显示,保证可以打出所需内容
      printInfo.style.display = "flex";
      printJS({
        printable: "printInfo",
        type: "html",
        targetStyles: ["*"],
      });
      // 页面元素要隐藏
      printInfo.style.display = "none";
      // 将上一次二维码清空(防止二维码叠加)
      this.$refs.qrCode.innerHTML = "";
    },
    // 获取所有条形码信息
    getAllBarCode(data) {
      this.$api.getAllBarCode(data).then((res) => {
        this.tableData = res.data.data;
         this.total = res.total;
      });
    },
  },
  components: {
    vTable,
    vPagination,
  },
};
</script>

<style lang="scss" scoped>
.printing {
  border: 1px solid #000;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 1000px;
  height: 99px;
  padding-left: 46px;
  padding-right: 391px;
  font-size: 16px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  // background-color: red;
  display: none;
  .firstColumn,
  .secondColumn,
  .thirdColumn {
    // width: 10cm;
    width: 283px;
    .container {
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .qrCode {
        width: 28px;
        height: 28px;
      }
    }
  }
}
</style>